<template>
	<cu-page-base :nav-bar-options="navBarOptions" @clickNavBarLeft="goBack">
		<view class="cu-pt-50">
			<view class="cu-w-100 cu-mt-50 cu-row cu-j-center">
				<image class="cu-mt-50" style="border-radius: 50%;width: 200rpx;height: 200rpx;" mode="aspectFill"
					:src="commonStore.logo">
				</image>
			</view>
			<view class="cu-w-100 cu-row cu-j-center">
				<image @click="wxlogin" style="width: 400rpx;margin-top: 100rpx;" src="./../static/weixin.png"
					mode="widthFix"></image>
			</view>
			<view class="cu-w-100 cu-row cu-j-center cu-my-40 cu-font-sm">
				<checkbox-group @change="event('checkboxChange')">
					<label>
						<checkbox :checked="isChecked" style="transform:scale(0.7)" value="true" />阅读并同意
						<text class="cu-text-primary cu-border-bottom cu-border-primary cu-py-10">《用于协议》</text>和
						<text class="cu-text-primary cu-border-bottom cu-border-primary cu-py-10">《隐私协议》</text>
					</label>
				</checkbox-group>
			</view>
			<view class="cu-w-100 cu-row cu-j-center cu-my-40">
				<text style="color: #f95221;" class="cu-font-big ">登录免费合成语音</text>
			</view>
			<uni-popup ref="popup" type="center" background-color="rgba(0,0,0,0)">
				<view class="cu-p-20 cu-shadow cu-bg-white" style="border-radius: 40rpx;">
					<view class="cu-w-100 cu-row cu-j-center cu-py-20">登录提示</view>
					<view class="cu-w-100 cu-py-20 cu-font-sm" style="height: 100rpx;">
						阅读并同意
						<text class="cu-text-primary">《</text>
						<text class="cu-text-primary cu-border-bottom cu-border-primary cu-py-10">用于协议</text>
						<text class="cu-text-primary">》</text>
						和
						<text class="cu-text-primary">《</text>
						<text class="cu-text-primary cu-border-bottom cu-border-primary cu-py-10">隐私协议</text>
						<text class="cu-text-primary">》</text>
					</view>
					<view class="cu-w-100 cu-row cu-j-sb">
						<button @click="event('close')" size="mini" type="default">取消</button>
						<button @click="event('confirm')" size="mini" type="primary">确定</button>
					</view>
				</view>
			</uni-popup>
		</view>
	</cu-page-base>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	import commMiXin from '@/common/mixin/common-mixin.js';
	export default {
		mixins: [commMiXin],
		computed: {
			...mapState({
				commonStore: state => state.commonStore,
			})
		},
		data() {
			return {
				isChecked: false,
				navBarOptions: {
					title: "登录",
					leftText: "返回",
					leftIcon: "back",
				},
			};
		},
		onLoad() {
		},
		methods: {
			event(type, data) {
				if (type === "checkboxChange") {
					this.isChecked = !this.isChecked;
				} else if (type === "close") {
					this.$refs.popup.close()
				} else if (type === "confirm") {
					this.isChecked = !this.isChecked;
					this.$refs.popup.close()
				}
			},
			async wxlogin() {
				const that = this
				console.log(this.isChecked)
				// 校验是否勾选隐私协议
				if (!this.isChecked) {
					this.$refs.popup.open()
					return
				}
				await uni.login({
					// 使用微信登录
					provider: 'weixin',
					success: async function(loginRes) {
						const {
							authResult,
							code,
							appleInfo,
							errMsg
						} = loginRes;
						if (errMsg === "login:ok" && code !== undefined) {
							await that.$store.dispatch('loginStore/login', {
								code
							});
						}
					},
					fail: function() {
						// console.log('fail')
					},
					complete: async function() {
						// console.log('complete')
					}
				});


			},
			goBack(data) {
				this.gotoPage(1,'navigateBack');
			},
		}
	}
</script>

<style lang="scss">

</style>